<header class="site-header">
  <h3 class="site-title">
    <a href="{{ site.github.url }}/">{{ site.title }}</a>
  </h3>
  <nav class="menu-list">
    {% for item in site.data.settings.menu %}
      <a href="{{ site.github.url }}/{{ item.folder }}/{{ item.file }}" class="menu-link">{{ item.name }}</a>
    {% endfor %}

    {% for item in site.data.settings.social %}
      <a href="{{ item.link }}" class="menu-link" target="_blank"><i class="fa fa-{{ item.icon }}" aria-hidden="true"></i></a>
    {% endfor %}
  </nav>
  <div class="dropdown">
    <button class="dropbtn"><i class="fa fa-bars" aria-hidden="true"></i></button>
    <div class="dropdown-content">
      {% for item in site.data.settings.menu %}
        <a href="{{ site.github.url }}/pages/{{ item.file }}" class="menu-link">{{ item.name }}</a>
      {% endfor %}

      {% for item in site.data.settings.social %}
        <a href="{{ item.link }}" class="menu-link" target="_blank"><i class="fa fa-{{ item.icon }}" aria-hidden="true"></i></a>
      {% endfor %}
    </div>
  </div>
</header>
